
<template>
  <!-- <el-alert :closable="false">
      <router-view />
  </el-alert>-->
  <div style="display:flex;align-items:center;justify-content:center; padding:30px;width:100%">
    <el-form
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      ref="ruleForm"
      label-width="500px"
      class="demo-ruleForm"

    >
      <el-form-item label="应收款" prop="accReceivable" required>
        <el-col :span="22">
          <el-input type="number" v-model="ruleForm.accReceivable"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="合同编号" prop="contractId">
        <el-col :span="22">
          <el-input v-model="ruleForm.contractId"></el-input>
        </el-col>
      </el-form-item>

      
      <el-form-item label="收款类型" prop="flag" required>
        <el-select v-model="ruleForm.flag" placeholder="请选择">
          <el-option label="预付款" value="1"></el-option>
          <el-option label="其余款项" value="2"></el-option>
        </el-select>
      </el-form-item>
     
     <el-form-item label="实收时间" prop="praTime" required>
         <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.praTime" format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
      </el-form-item>

      <el-upload
      class="upload-demo"
      :action="host+'upload'"
      :headers="token"
      :on-progress="handlep"
      multiple
      :on-error="handleError"
      :limit="3"
      :file-list="filename"
      :on-success="handleSuccess"
      ref="upload"
    >
      <el-button size="small">点击上传支付凭证</el-button>
      <!-- <el-button size="small" style="float:right" @click="$router.back(-1)">返回</el-button> -->
    </el-upload>
    

      <el-form-item style="display:flex;align-items:center;justify-content:center">
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <el-button @click="$router.back(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { hqfgs, tjht } from "@/api/ht";
import { getToken, gettype, getid } from "@/utils/auth";
import { tjgs } from "@/api/zuzhijiagou";
import request from "@/utils/request";
import axios from "axios";
export default {
  name: "DragTable",

  data() {
  

    return {


      loading: false,
      doc: "",
      itemid: "",
      date: "",
      filename: [{ name: "" }],
      token: { token: getToken() },
      p: {
        file: 1
      },
      value1: "",










      list: null,
 
      qx:[],
      ruleForm: {
        accReceivable: "",
        contractId	: "",
        flag: "",
        praTime: "",
        voucher:'',
      },

      rules: {
        accReceivable: [{ required: true, message: "请输入应收款", trigger: "blur" }],
        contractId: [{ required: true, message: "请输入合同编号", trigger: "blur" }],
        flag: [{ required: true, message: "请输入收款类型", trigger: "blur" }],
        praTime: [{ required: true, message: "请输入实收时间", trigger: "blur" }],

      }
    };
  },
  created() {
      this.ruleForm.contractId = this.getSearchString('id');
      this.host = this.$host;
    this.itemid = this.$route.query.id;
  },
  methods: {
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          // 添加方法
     request("/fund/add", {
        method: "post",
        headers: {
          "Content-Type": "application/json"
        },
        data:that.ruleForm
      }).then(function(response) {
        self.info = response.data.object;
      });

        
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSuccess(response, file, fileList) {
      var that = this;
      console.log(response.object);
      if (response.code == 1) {
        this.$message.success("上传成功！");
        that.ruleForm.voucher = response.object;
      } else {
        that.$message.error(response.message);
      }
    },
      handlep(event, file, fileList) {
      this.filename.map((v, i) => {
        v.file = file.name;
      });
      console.log(this.filename);
    },
    handleError(err, file, fileList) {
      console.log(err);
      this.$message.error("上传失败！");
    },
    getqx() {
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`person/rolelist`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.qx = response.data.object;
            console.log(that.qx.level)
            var level=that.qx

            if(level==4){
              that.ruleForm.cid=level.cid
            }else if(level==3){
              that.ruleForm.cid=level.cid
              that.ruleForm.bid=level.bid
            }else if(level==2){
              that.ruleForm.cid=level.cid
              that.ruleForm.bid=level.bid
              that.ruleForm.pid=level.pid
            }
          } else {
            that.fail = true;
           
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    },

  getSearchString(key) {
    // 获取URL中?之后的字符
    var addrstr = location.href;
    var str = addrstr.substring(addrstr.lastIndexOf("?") + 1, addrstr.length); //shopcode=125806649&branchcode=001&recommendid=6&openidfrom=&awardto=1001

    // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
    var arr = str.split("&");
    var obj = new Object();

    // 将每一个数组元素以=分隔并赋给obj对象
    for (var i = 0; i < arr.length; i++) {
        var tmp_arr = arr[i].split("=");
        obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
    }
    return obj[key] || '';
}



  }
};
</script>

<style scoped>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
/* .el-alert__content {
  width: 300px;
} */
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.el-alert__content {
  width: 50%;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
.demo-ruleForm{
  width: 500px;
}
/* .el-alert__content {
  width: 300px;
} */
</style>
